<template>
    <div class="container">
        <div class="mapContainer" id="mapContainer"></div>

        <el-dialog v-model="dialogVisible" title="当前定位" width="300px" :before-close="handleClose">
            <span>{{ point }}</span>
            <template #footer></template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import { XYZ } from 'ol/source';
import { onMounted, ref } from 'vue';

const map = ref();
const dialogVisible = ref(false);
const point = ref();

const initMap = () => {
    map.value = new Map({
        target: 'mapContainer'
    });

    const layer = new TileLayer({
        source: new XYZ({
            url: `http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7`
        })
    });
    map.value.addLayer(layer);

    const view = new View({
        zoom: 12,
        center: [116.397477, 39.908692],
        projection: 'EPSG:4326'
    });
    map.value.setView(view);

    map.value.on('click', (e: any) => {
        console.log('point=', e.coordinate);
        point.value = e.coordinate;
        dialogVisible.value = true;
    });
};
onMounted(() => {
    initMap();
});

function handleClose() {
    dialogVisible.value = false;
}
</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    height: 100%;
}
.mapContainer {
    width: 100%;
    height: 100%;
}
</style>